$pad: 20px;

.pm_grid {
	margin: 0 0 $pad 0;

	&.truncate > div {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&.pad {
		padding: $pad 0 $pad $pad;
		[class*='col-']:last-of-type {
			padding-right: $pad;
		}
	}

	&.no-margin {
		margin: 0;
	}

	&.no-padding {
		padding: 0;
		[class*='col-'] {
			padding: 0;
		}
	}

	&:after {
		content: "";
		display: table;
		clear: both;
	}

	[class*='col-'] {
		float: left;
		padding-right: $pad;
		&:last-of-type {
			padding-right: 0;
		}
	}

	.col-1-8 {
		width: 12.5%;
	}
	.col-1-6 {
		width: 16.6%;
	}
	.col-1-5 {
		width: 20%;
	}
	.col-2-8,
	.col-1-4 {
		width: 25%;
	}
	.col-1-3,
	.col-2-6 {
		width: 33.33%;
	}
	.col-3-8 {
		width: 37.5%;
	}
	.col-2-5 {
		width: 40%;
	}
	.col-4-8,
	.col-1-2,
	.col-3-6 {
		width: 50.0%;
	}
	.col-3-5 {
		width: 60%;
	}
	.col-5-8 {
		width: 62.5%;
	}
	.col-2-3,
	.col-4-6 {
		width: 66.66%;
	}
	.col-6-8,
	.col-3-4 {
		width: 75.0%;
	}
	.col-4-5 {
		width: 80%;
	}
	.col-5-6 {
		width: 83.3%
	}
	.col-7-8 {
		width: 87.5%;
	}
	.col-1-1,
	.col-4-4,
	.col-5-5,
	.col-6-6,
	.col-8-8
	{
		width: 100%;
	}

	&.hasImbricated {
		padding: 10px 20px;
		margin:$pad 0 0 0;
		border: 1px solid rgba(0,0,0,0.1);
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}
	&.imbricated {
		margin: 0 0 $pad 0;
		padding: 10px $pad;
		background-color: rgba(0, 0, 0, 0.05);
		border-bottom: 1px solid rgba(0,0,0,0.1);
		border-left: 1px solid rgba(0,0,0,0.1);
		border-right: 1px solid rgba(0,0,0,0.1);
	}

	&.flex {
		display: flex;
		-webkit-flex-direction:column;
		flex-direction: column;

		&.flex-mobileShrink,
		&.flex-row {
			-webkit-flex-direction:row;
			flex-direction:row;
		}

		:not(.absorbing, .initialGrow) > [class*='col-'] {
			-webkit-flex-grow: 1;
		    flex-grow: 1;
			flex-basis: 0;
			width: auto;
		}

		&.absorbing > [class*='col-'] {
			-webkit-flex-grow:0;
		    flex-grow:0;
		}

		> [class*='col-'].absorbe {
			-webkit-flex-grow: 1;
			flex-grow: 1;
		}

		> [class*='col-'].initialGrow {
			-webkit-flex-grow: initial;
			flex-grow: initial;
			& > * {
				white-space: nowrap;
			}
		}

		> [class*='col-']:first-child:nth-last-child(3),
		> [class*='col-']:first-child:nth-last-child(3) ~ [class*='col-'] {
			&.double {
				flex: 2.3;
			}
		}

		> .col-basis {
			flex-basis: 200px;
		}

	}

}

.appConfigBody-is-mobile {
	.pm_grid {
		&.flex:not(.flex-mobileShrink) {
			flex-direction: column;
			[class*='col-'] {
				margin-bottom: 20px;
			}
		}
		&.flex-mobileShrink > [class*='col-'] {
			white-space: nowrap;
		}
		.col-basis {
			flex-basis: 0px;
		}

		[class*='col-'] {
			float: left;
			width: 100% !important;
			clear: both;
			padding: 0;
			flex-basis: auto;
			margin-bottom: 10px;
		}

	}

}
